<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 当数据改变后vue会通知到使用该数据的代码
        // vue通过Object.defineProperty()来更新定义data中的所有属性

        // mvvm 双向绑定，采用数据劫持，结合发布者-订阅者模式的方式，
        // 通过Object.defineProperty()来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

        //     Vue主要通过以下4个步骤实现数据双向绑定: 
        //     1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 
        //     2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 
        //     3、实现一个订阅者 Watcher，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图 
        //     4、最后实现 MVVM 作为数据绑定的入口，整合监听器、解析器和订阅者


        // 响应式原理就是我的Object.defineProperty()拦截了属性的getter，和setter,
        // 然后当我改变vue数据的时候，setter就会通触发，dep就会搜集依赖，然后就会通知
        // 每个属性的watcher让其进行改变,当我获取数据的时候我就会触发getter

        
    </script>
</body>
</html>